<template>
    <div class="goodsinfo-container">

        <transition
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"
            >
            <div class="ball" ref="ball" v-if="ballFlag"></div>
        </transition>

        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner lunbotu">
                    <swiper :lunbotuList="lunbotuList" :isfull="false"></swiper>
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-header">{{ goodsInfo.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥{{ goodsInfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now-price">￥{{ goodsInfo.sell_price }}</span>
                    </p>
                    <p>购买数量：<numbox @getCount="getSelectedCount" :max="goodsInfo.stock_quantity"></numbox></p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>

                    </p>
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{ goodsInfo.goods_no }}</p>
                    <p>库存情况：{{ goodsInfo.stock_quantity }}件</p>
                    <p>上架时间：{{ goodsInfo.add_time | dataFormat }}</p>

                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="danger" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type="primary" size="large" plain @click="getComment(id)">商品评论</mt-button>
            </div>
        </div>
    </div>

</template>

<script type="text/javascript">

    import { Toast } from 'mint-ui';
    import swiper from '../subcomponents/swiper.vue'
    import numbox from '../subcomponents/goodsinfo_numberbox.vue'

    
     export default{
         data() {
            return{
                id: this.$route.params.id,
                lunbotuList: [],
                goodsInfo: {},
                ballFlag: false,
                selectedCount: 1
            }
         },
         components: {
            swiper,
            numbox
         },
         created() {
             this.getLunbo()
             this.getGoodsInfo()
         },
         methods: {
             getLunbo() {
                 this.$http.get('getLunbotu/' + this.id +'.php').then( res => {
                     if (res.body.status === 0){
                         this.lunbotuList = res.body.Message;
                         console.log(res);
                     } else {
                         Toast("获取图片失败")
                     }
                 })
             },
             getGoodsInfo() {
                 this.$http.get('getGoodsDetail/' + this.id +'.php').then( res => {
                    if (res.body.status === 0){
                         this.goodsInfo = res.body.Message;
                         console.log(res);
                     } else {
                         Toast("获取信息失败")
                     }
                 })
             },
             goDesc(id) {
                this.$router.push( { name: 'goodsdesc', params: { id }} )
             },
             getComment(id) {
                this.$router.push( { name: 'goodscomments', params: { id }} )
             },
             addToShopCar() {
                 this.ballFlag = !this.ballFlag;

                 var goodsinfomation = {
                    id: this.$route.params.id,
                    count: this.selectedCount, 
                    price: this.goodsInfo.sell_price, 
                    selected: true
                };
                 this.$store.commit('addToCar', goodsinfomation)
             },
             beforeEnter(el) {
                 el.style.transform = "translate(0, 0)"
             },
             enter(el, done) {
                el.offsetWidth;
                
                const ballPosition = this.$refs.ball.getBoundingClientRect();
                const badgePosition = document.getElementById('badge').getBoundingClientRect();

                const xDist = badgePosition.left - ballPosition.left;
                const yDist = badgePosition.top - ballPosition.top;

                el.style.transform = `translate(${xDist}px, ${yDist}px)`;
                el.style.transition = "all 0.5s cubic-bezier(.4,-0.3,1,.68)";
                done()
             },
             afterEnter(el) {
                this.ballFlag = !this.ballFlag
             },
             getSelectedCount(count) {
                 this.selectedCount = count
                 console.log( this.selectedCount )
             }
         }

    }
</script>
<style lang="scss" scoped>
    .goodsinfo-container{
        background-color: #eee;
        overflow: hidden;
        .now-price{
            color:red;
        }
        .ball {
            width: 19px;
            height: 19px;
            border-radius: 50%;
            background-color: red;
            position: absolute;
            z-index: 120;
            left: 146px;
            top: 459px;
        }
    }
    .lunbotu {
        height: 300px;
    }
    .mui-card-footer{
        display: block;
        button{
            margin: 15px 0;
        }
    }

</style>